<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<!--父组件-->
<div id="app">
    <component1 @cpn-but="cpnBut" @cpn-but1="cpnBut1"></component1>
</div>

<!--子组件-->
<template id="component1">
    <div>
        <button @click="but">子组件按钮触发父组件事件</button>
        <button @click="but1">子组件按钮触发父组件事件并带参数</button>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 子组件给父组件传递数据的时候，就要使用自定义事件来实现
     * 自定义事件的流程：
     * 在组件中，通过$emit来触发事件
     * 在父组件，通过v-on来监听子组件事件
     */
    const component1 = {
        template: "#component1",
        methods: {
            but() {
                console.log("子组件按钮被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                this.$emit('cpn-but');
            },
            but1() {
                console.log("子组件按钮触并带参数被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                //子组件按钮触发父组件事件并带参数，就在this.$emit加多一个参数对象
                this.$emit('cpn-but1', 'hhhh');
            }
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            message: "你好"
        },
        components: {
            'component1': component1
        },
        methods: {
            cpnBut() {
                console.log("父组件的方法被触发了");
            },
            cpnBut1(val) {
                console.log("父组件事件并带参数被触发了");
                console.log("参数:" + val);
            }
        }
    })

</script>
</html>